.RecordingA01 {
	padding: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	height: 100%;

	& > div {
		height: 100%;

		&.left {
			width: 400px;
			margin-right: 16px;
			overflow-y: scroll;

			&::-webkit-scrollbar {
				display: none;
			}

			& > .label {
				display: flex;
				align-items: flex-start;
				justify-content: center;

				& > .title {
					width: 64px;
					font-size: 18px;
					font-family: YouSheBiaoTiHei;
					font-weight: 400;
					color: #b2fbfd;
					text-align: right;
					margin: 4px 4px 4px 0;
					line-height: 40px;
				}

				& > .list {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: space-evenly;
					flex-wrap: wrap;

					& > div {
						display: flex;
						align-items: center;
						justify-content: center;
						width: calc(var(--width) - 8px);
						height: 40px;
						margin: 4px;
						border-radius: 6px;
						font-size: 16px;
						font-family: Microsoft YaHei;
						font-weight: bold;
						color: #b2fbfd;
						cursor: pointer;
						user-select: none;
					}
				}
			}
		}

		&.right {
			flex: 4;
			display: flex;
			align-items: center;
			justify-content: center;

			.ant-empty-description {
				color: white;
			}

			.videoList {
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				position: relative;
				z-index: 1;

				& > .box {
					flex: 1;
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-wrap: wrap;

					& > .item {
						padding: 4px;
						position: relative;
						z-index: 1;

						& > .title {
							position: absolute;
							left: 16px;
							top: 12px;
							width: 100%;
							z-index: 1;
							font-size: 16px;
							font-family: Microsoft YaHei;
							font-weight: bold;
							color: #fff;
							text-shadow: 0 0 5px #262626;
						}
					}
				}

				.ant-select {
					position: absolute;
					right: -16px;
					top: -16px;
					width: 80px;
					z-index: 1;

					.ant-select-selector {
						color: white;
						background: var(--ItemTitleTwoModalTableInputBack);
						border: none;
						outline: none;
					}
				}

				// .ant-pagination {
				//     width: 100%;
				//     display: flex;
				//     padding: 8px 16px 0 16px;

				//     &>.ant-pagination-total-text {
				//         flex: 1;
				//     }
				// }
				.ant-pagination {
					width: 100%;
					display: flex;
					align-items: center;
					padding: 8px 16px 0 16px;

					.ant-pagination-item {
						display: flex;
						align-items: center;
						justify-content: center;
					}

					& > li:first-child {
						flex: 1;
						font-size: 14px;
						font-family: Microsoft YaHei;
						font-weight: bold;
						color: var(--ItemTitleTwoModalTablePaginationLabel);
					}

					& > .ant-pagination-item {
						background: var(--ItemTitleTwoModalTablePaginationBack);
						border-color: var(--ItemTitleTwoModalTablePaginationBorder);
						margin-right: 8px;

						& > a {
							color: var(--ItemTitleTwoModalTablePaginationColor);
						}
					}

					& > .ant-pagination-item-active {
						background: var(--ItemTitleTwoModalTablePaginationActiveBack);
						border-color: var(--ItemTitleTwoModalTablePaginationActiveBorder);

						& > a {
							color: var(--ItemTitleTwoModalTablePaginationActiveColor);
						}
					}

					.ant-pagination-prev,
					.ant-pagination-next,
					.ant-pagination-jump-prev,
					.ant-pagination-jump-next {
						& > button {
							background: transparent;
							border: none;
						}
					}

					.ant-pagination-disabled .ant-pagination-item-link,
					.ant-pagination-disabled:hover .ant-pagination-item-link {
						color: var(--ItemTitleTwoModalTablePaginationDisabled);
					}

					.ant-pagination-prev button,
					.ant-pagination-next button {
						color: var(--ItemTitleTwoModalTablePaginationButton);
					}

					.ant-pagination-jump-prev
						.ant-pagination-item-container
						.ant-pagination-item-ellipsis,
					.ant-pagination-jump-next
						.ant-pagination-item-container
						.ant-pagination-item-ellipsis {
						color: var(--ItemTitleTwoModalTablePaginationJumpEllipsis);
					}

					.ant-pagination-jump-prev
						.ant-pagination-item-container
						.ant-pagination-item-link-icon,
					.ant-pagination-jump-next
						.ant-pagination-item-container
						.ant-pagination-item-link-icon {
						color: var(--ItemTitleTwoModalTablePaginationJumpIcon);
					}
				}
			}
		}
	}
}
